<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="../static/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
    <link rel="stylesheet" href="../static/css/common.css">
    <style>
        .params {
            position: relative;
            border: 1px solid #d9e6ff;
            padding: 20px;
        }

        .params .title {
            position: absolute;
            top: -8px;
            left: 20px;
            background: white;
            width: 51px;
            text-align: center;
            color: #8aa5bb;
            font-size: 12px;
        }

        .params .param-item {
            margin-bottom: 10px;
        }

        .params .param-item .param-label {
            text-align: right;
            color: #1878ca;
        }
    </style>
    <title>Document</title>
</head>

<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"
                    aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">SeaHawk</a>
            </div>
            <div id="navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="/analyze">analyze</a></li>
                    <li><a href="/home">comment</a></li>
                    <li><a href="/report">report</a></li>
                </ul>
            </div>
            <!--/.nav-collapse -->
        </div>
    </nav>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6">
                <div class="panel panel-default" style="width: 95%;margin: 0 auto;">
                    <div class="panel-heading">
                        <h3>所有模型评测结果统计</h3>
                    </div>
                    <div class="panel-body">
                        <div class="params">
                            <div class="title">
                                参数
                            </div>
                            <div>
                                <div class="row">
                                    <div class="col-md-1">
                                        模型
                                    </div>
                                    <div class="col-md-11">

                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="charts" style="width: 100%;min-height: 600px"></div>
                    </div>
                    <div class="panel-footer">
                        所有评测结果统计
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="panel panel-default" style="width: 95%;margin: 0 auto;">
                    <div class="panel-heading">
                        <h3>指定模型评测结果统计</h3>
                    </div>
                    <div class="panel-body">
                        <div class="params">
                            <div class="title">
                                参数
                            </div>
                            <div>
                                <div class="row">
                                    <div class="col-md-1">
                                        模型
                                    </div>
                                    <div class="col-md-11">
                                        <select id="model" name="model" id="">

                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="charts1" style="width: 100%;min-height: 600px"></div>
                    </div>
                    <div class="panel-footer">
                        指定模型评测结果统计
                    </div>
                </div>
            </div>
        </div>
    </div>
    <nav class="navbar navbar-inverse navbar-fixed-bottom">
        <div class="container">
            @copyright HuaWei
        </div>
    </nav>
    <script src="../static/js/jquery-3.3.1.min.js" type="text/javascript"></script>
    <script src="../static/js/bootstrap.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="../static/js/echarts.min.js"></script>
    <script>
        (function () {


            var myChart = echarts.init(document.getElementById('charts'));
            var myChart1 = echarts.init(document.getElementById('charts1'));
            var model = $("#model option:selected").text();
            var option = {

                title: {
                    text: '主观评测百分比占比图',
                    left: 'center',
                    top: 20,
                    textStyle: {
                        color: 'black'
                    }
                },

                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },

                visualMap: {
                    show: false,
                    min: 50,
                    max: 400,
                    inRange: {
                        colorLightness: [0, 1]
                    }
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: '80%',
                        center: ['50%', '50%'],
                        data: [],
                        roseType: 'radius',
                        label: {
                            normal: {
                                textStyle: {
                                    color: 'black'
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                lineStyle: {
                                    color: 'black'
                                },
                                smooth: 0.2,
                                length: 10,
                                length2: 20
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#c23531',
                                shadowBlur: 200,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },

                        animationType: 'scale',
                        animationEasing: 'elasticOut',
                        animationDelay: function (idx) {
                            return Math.random() * 200;
                        }
                    }
                ]
            };
            getAllModel();
            getPercentByModel();


            $("#model").on('change', function () {
                var model = $("#model option:selected").text();
                getPercentByModel(model);
            })

            function getAllModel() {
                $.ajax({
                    type: "get",
                    async: true,
                    url: "/output/v1.0/chart/model/",
                    data: {

                    },
                    dataType: "json",
                    success: function (data) {
                        console.log(data)

                        var html = "";
                        data.forEach(function (i, e) {
                            var temp = "<option>" + i + "</option>"
                            html += temp;

                        })
                        $('#model').append(html);
                    },
                    error: function (error) {
                        console.log(error)
                    }
                });
            }

            function getPercentByModel() {
                $.ajax({
                    type: "get",
                    async: true,
                    url: "/optanalyze/v1.1/chart/pie/",
                    data: {
                        // model: model
                    },
                    dataType: "json",
                    success: function (data) {
                        var target = []
                        Object.keys(data.details[0]).forEach(function (key) {
                            var obj = {}
                            obj['value'] = data.details[0][key];
                            obj['name'] = key;
                            target.push(obj)
                        });

                        option.series[0].data = target;
                        myChart.setOption(option)
                        myChart1.setOption(option)
                    },
                    error: function (error) {
                        console.log(error)
                    }
                });
            }

            function generatePie(model) {
                $.ajax({
                    type: "get",
                    async: true,
                    url: "/output/v1.0/chart/scatter/",
                    data: {

                    },
                    dataType: "json",
                    success: function (data) {
                        var html = "";
                        data['modeltype'].forEach(function (i, e) {
                            var temp = " <span class='label label-" + labelStyle[e] + "'>" + i[0] + "</span>"
                            html += temp;

                        })
                        $('.model').append(html);
                    },
                    error: function (error) {
                        console.log(error)
                    }
                });


                myChart.setOption(option)
            }


        })()
    </script>
</body>

</html>